<template>
	<view>
		<view class="address-section">
			<!-- <mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker"
				:pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker> -->
			<form @submit="formSubmit" @reset="formReset">
				<view class="row b-b">
					<text class="tit">提现金额</text>
					<input class="input" name="money" type="number" placeholder="请输入提现金额"
						placeholder-class="placeholder" />
				</view>

				<view class="row b-b">
					<text class="tit">手机号码</text>
					<input class="input" name="mobile" type="number" placeholder="请输入手机号码"
						placeholder-class="placeholder" />
				</view>

				<view class="row b-b">
					<text class="tit">真实姓名</text>
					<input class="input" name="realname" type="text" placeholder="请输入真实姓名"
						placeholder-class="placeholder" />
				</view>

				<view class="row b-b">
					<text class="tit">收款方式</text>
					<radio-group name="type">
						<label>
							<radio value="1" checked="" /><text>支付宝</text>
						</label>
						<label style="margin-left: 20px;">
							<radio value="2" /><text>微信</text>
						</label>
						<label style="margin-left: 20px;">
							<radio value="3" /><text>银行卡</text>
						</label>
					</radio-group>
				</view>

				<view class="row b-b">
					<text class="tit">提现密码</text>
					<input class="input" name="password" type="password" placeholder="请输入提现密码"
						placeholder-class="placeholder" />
				</view>

				<button form-type="submit" class="add-btn">提交</button>
			</form>
			<view class="place" style="height: 20px;width: 100%"></view>
		</view>
	</view>
</template>

<script>
	import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload1.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		components: {
			robbyImageUpload
		},
		data() {
			return {
				title: '',
				id: 0,
				money: '',
				mobile: '',
				realname: ''
			}
		},
		onLoad() {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}

		},
		computed: {
			...mapState(['hasLogin']),
		},
		methods: {
			...mapMutations(['login', 'logout']),

			formSubmit: function(e) {

				if (!this.hasLogin) {
					this.islogin = true
					return false;
				}
				var formdata = e.detail.value
				if (formdata.money <= 0) {
					this.$api.msg('提现额度不能小于零');
					return;
				}
				if (!/(^1[3|4|5|7|8|9][0-9]{9}$)/.test(formdata.mobile)) {
					this.$api.msg('请输入正确的手机号码');
					return;
				}

				if (formdata.realname == '') {
					this.$api.msg('请输入真实姓名！');
					return;
				}

				if (formdata.password == '') {
					this.$api.msg('请输入提现密码！');
					return;
				}

				this.sub(formdata);
			},

			async sub(formdata) {
				let token = uni.getStorageSync('token');

				if (!token) {
					this.$api.msg('token缺失！');
				}
				formdata.token = token;
				let res = await this.$myRequest({
					url: '/wdReply',
					data: formdata,
					methods: 'post'
				})

				this.$api.msg(res.data.msg);
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1000)
			}
		},
	}
</script>

<style lang="scss">
	page {
		background: #f1f1f1;
		// padding-top: 16upx;
	}

	.row {
		display: flex;
		// align-items: center;
		position: relative;
		padding: 20rpx;
		height: 100%;
		background: #fff;
		border-bottom: 1rpx solid #e5e5e5;

		// margin-top: 10rpx;
		.tit {
			flex-shrink: 0;
			width: 170upx;
			font-size: 28upx;
			color: #303133;
		}

		.input {
			flex: 1;
			font-size: 28upx;
			color: #303133;
		}

		.icon-shouhuodizhi {
			font-size: 36upx;
			color: #909399;
		}
	}

	.default-row {
		margin-top: 20upx;

		.tit {
			flex: 1;
		}

		switch {
			transform: translateX(16upx) scale(.9);
		}
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: 32upx;
		letter-spacing: 4upx;
		color: #fff;
		background-color: #29ad97;
		border-radius: 50upx;
		box-shadow: 1px 2px 5px #dadada;
	}
</style>
